<template>
  <div>
    <div class="resource_box">
      <div
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="30"
      >
        <div v-for="(item, index) in pageList" :key="index">
          <!-- 图书列表 -->
          <div
            class="resource_list resource_list_book"
            v-if="item.resourceType == item.resourceType"
            @click="
              detailsPage(
                item.id,
                item.resourceType == 1
                  ? 'bookDet'
                  : item.resourceType == 4
                  ? 'videoDet'
                  : 'audioDet'
              )
            "
          >
            <div
              :class="
                item.resourceType == 1
                  ? 'resource_book_left'
                  : item.resourceType == 4
                  ? 'resource_video_left'
                  : 'resource_audio_left'
              "
            >
              <img
                :src="coverUrl(item.cover, 'files')"
                class="book_icon"
                @error="
                  searchType == 1
                    ? errImg('book')
                    : searchType == 2
                    ? errImg('video')
                    : errImg('audio')
                "
              />
              <img
                src="@/assets/index/video_icon.png"
                v-if="item.resourceType == 4"
                class="resource_icon"
              />
              <img
                src="@/assets/index/audio_icon.png"
                v-if="item.resourceType == 5"
                class="resource_icon"
              />
            </div>
            <div class="resource_common_right">
              <div class="name_box">{{ item.name }}</div>
              <div v-if="item.resourceType == 1">
                <!-- <div class="author_box" v-if="item.authorList">
                  {{ item.authorList.author ? item.authorList.author : "暂无" }}
                </div> -->
                <div
                  class="author_box"
                  v-if="
                    item.authorList !== undefined && item.authorList.length > 0
                  "
                >
                  <span
                    v-for="(aa, index) in item.authorList.slice(0, 2)"
                    :key="index"
                  >
                    {{ aa.author }}
                  </span>
                </div>
                <div class="author_box" v-else>暂无</div>
                <div class="recomm_rate">
                  <el-rate
                    v-model="item.score"
                    disabled
                    text-color="#FFE400"
                    style="float:left;margin-right:0.1rem;"
                  ></el-rate>
                  <span class="score_text">{{ item.resourceScore }}</span>
                  <span class="rate_num">{{ item.commentNum }}人评分</span>
                </div>
              </div>
              <div class="content_box">{{ item.synopsis }}</div>
              <div class="content_price" v-if="item.resourceType != 1">
                <span class="content_realPrice" v-if="item.realPrice > 0"
                  >￥{{ item.realPrice }}</span
                >
                <span class="content_free" v-else>免费</span>
                <span class="content_browse">浏览 {{ item.browseNum }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 无匹配数据显示界面 -->
      <div v-if="isNull && !loading" class="resource_null">
        <img src="@/assets/resource/null.png" class="null_image" />
        <div class="null_text">相关内容正在紧急筹备中，敬请期待</div>
        <div class="null_tips">试试看其他栏目</div>
      </div>
      <div class="resource_over"></div>
    </div>
    <p v-if="loading" class="page-infinite-loading">
      <span>
        <mt-spinner type="fading-circle"></mt-spinner>
        加载中...
      </span>
    </p>
    <p v-else class="loadOver">
      <span v-if="!isNull && isLast">—— 这是我的底线 ——</span>
    </p>
  </div>
</template>

<script>
export default {
  name: "resourceCom",
  props: {
    pageList: {
      type: Array
    },
    loading: {
      type: Boolean,
      value: ""
    },
    isLast: {
      type: Boolean,
      value: ""
    },
    isNull: {
      type: Boolean,
      value: ""
    },
    searchType: {
      type: Number,
      value: ""
    }
  },
  methods: {
    detailsPage(id, name) {
      console.log(id, name);
      localStorage.setItem("articleId", id);
      // this.$router.push(name = name,id);
      this.navigationFuc(name, { id });
    },
    loadMore() {
      this.$emit("nextList");
    }
  },
<<<<<<< HEAD
  mounted () {
    this.pageList = []
=======
  watch:{
    searchType(){
      this.loading = true
      console.log(111)
    }
>>>>>>> 72258ca2db590d58264f567254c2f9d4dad1e8ca
  }
};
</script>

<style scoped>
.resource_box {
  padding: 0 0.3rem;
}
.resource_list {
  padding: 0.3rem 0;
  border-bottom: solid 1px #eeeeee;
  display: flex;
  width: 100%;
}
/* 公共样式 */
.name_box {
  font-size: 16px;
  font-weight: bold;
  color: #222222;
  line-height: 0.46rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.content_box {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 13px;
  height: 0.72rem;
  margin-top: 0.2rem;
  color: #878b94;
  word-break: break-all;
}
.content_price {
  overflow: hidden;
  margin-top: 0.2rem;
}
.content_realPrice {
  color: #fe2023;
  font-size: 12px;
}
.content_free {
  color: rgb(10, 181, 98);
}
.content_browse {
  color: #b2b1c3;
  font-size: 11px;
  float: right;
}
.read_box {
  color: #bdc1cb;
  font-size: 11px;
  margin-top: 0.2rem;
}
.author_box {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 13px;
  font-weight: 500;
  color: #bdc2cb;
  margin: 0.1rem 0;
}
.el-rate__icon {
  margin-right: 0px;
}

/* 图书 */
.resource_book_left {
  width: 1.5rem;
  height: 2.1rem;
  margin-right: 0.27rem;
}
.resource_book_left .book_icon {
  width: 100%;
  height: 100%;
  border-radius: 0.1rem;
}
/* 视频 */
.resource_video_left {
  width: 2.6rem;
  height: 1.46rem;
  margin-right: 0.27rem;
  position: relative;
  border-radius: 0.1rem;
}
.resource_video_left .book_icon {
  width: 100%;
  height: 100%;
}
/* 音频 */
.resource_audio_left {
  width: 1.78rem;
  height: 1.78rem;
  margin-right: 0.27rem;
  position: relative;
  border-radius: 0.1rem;
}
.resource_audio_left .book_icon {
  width: 100%;
  height: 100%;
}
/* 视频 音频icon */
.resource_icon {
  width: 0.4rem;
  height: 0.4rem;
  position: absolute;
  bottom: 0.15rem;
  right: 0.15rem;
}
.resource_common_right {
  flex: 1;
}
.resource_null {
  text-align: center;
}
.resource_null .null_image {
  width: 3rem;
  height: auto;
  margin: 0 auto;
  font-weight: 500;
  margin-top: 1.8rem;
}
.resource_null .null_text {
  margin-top: 0.5rem;
  color: #696969;
  font-size: 16px;
}
.resource_null .null_tips {
  margin-top: 0.19rem;
  color: #bdc2cb;
  font-size: 14px;
}
.recomm_rate {
  overflow: hidden;
  margin-bottom: 0.1rem;
}
.score_text {
  color: #fd7068;
  font-weight: bold;
  font-size: 14px;
  display: inline-block;
}
.rate_num {
  color: #5e5f71;
  font-size: 14px;
  font-weight: bold;
  margin-left: 0.16rem;
}
/* 底线 */
.resource_over {
  margin: 0.35rem auto 44rpx;
  color: #d5d7e0;
  font-size: 12px;
  font-weight: 500;
  line-height: 0.4rem;
  text-align: center;
}
</style>

<style>
.mint-spinner-fading-circle {
  margin: 0 auto;
  margin-bottom: 10px;
}
.page-infinite-loading {
  text-align: center;
  padding: 10px;
  color: #999999;
  font-size: 14px;
}
.loadOver {
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  color: #999999;
  font-size: 14px;
}
</style>
